<template>
  <div class="list" ref="wrapper">
		<div>
		  <div class="list-current">
		    <h3 class='list-title border-topbottom'>当前城市</h3>
		    <div class="city">
					<span @click="changeCity('温州')">温州</span>
		    </div>
		  </div>
		
		  <div class="list-hot">
		    <h3 class='list-title border-topbottom'>热门城市</h3>
		    <div class="city">
		      <span @click="changeCity(hotcity.name)" v-for="hotcity in hotCities">{{hotcity.name}}</span>
		    </div>
		  </div>
		  <div class="list-item" v-for="(cityList, citySort, index) in cities" :key="index">
		    <h3 class='list-title border-topbottom'>{{citySort}}</h3>
		    <ul>
		      <li @click="changeCity(city.name)" class='city-item border-bottom' v-for="city in cityList" :key="city.id">
						{{city.name}}
					</li>
		    </ul>
		  </div>
		</div>
  </div>
</template>

<script>
	import BScroll from 'better-scroll'
export default {
	name:'CityList',
	props: ["cities","hotCities"],
	created() {
		// 创建时打印会报错
		// console.log(cities)
		// console.log(hotCities)
	},
	mounted() {
		// console.log(this.scroll); // 此时为undefined, 说明这个属性时新创建的
		// 绑定BScroll滚动插件
		this.scroll = new BScroll(this.$refs.wrapper,{click:true})
	},
	methods: {
		changeCity(city){
			localStorage.setItem('city',city)
			this.$router.push('/')
		}
	}
}
</script>

<style lang='stylus' scoped>
  .border-bottom:before
      border-color:#aaa
  .list
    position:fixed
    overflow: hidden
    top: 1.78rem
    left: 0
    right: 0
    bottom: 0
  .list-title
    line-height: 0.54rem
    background: #eee
    padding-left: 0.2rem
    color: #666
    font-size: 0.26rem
  .city
    padding-left:.15rem
    span
      display:inline-block
      width:28%
      padding:.15rem .2rem
      margin:.1rem
      border:.01rem solid #ccc
      text-align:center
      box-sizing:border-box
      border-radius:.05rem
  .city-item
    line-height:.8rem
    padding-left:.2rem
</style>
